<template>
    <!-- 用户管理页面 -->
    <div style="margin-top: 60px; margin-left: 80px">
        <!-- 查询表单 -->
        <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="关键字：" prop="keyWord">
                <!-- 输入关键字 -->
                <el-input v-model="keyWord" placeholder="请输入关键字" style="width: 230px; float: left" />
                <span style="margin-left:30px;">条件查询：</span>
                 <!-- 选择查询类型 -->
                <el-select v-model="type" style="margin-left:30px; width: 230px;">
                    <el-option label="姓名" value="name" />
                    <el-option label="年龄" value="age" />
                    <el-option label="性别" value="gender" />
                    <el-option label="地址" value="address" />
                </el-select>
                <!-- 查询与添加按钮 -->
                <el-button type="primary" style="margin-left: 30px" @click="search">搜索</el-button>
                <el-button type="success" style="margin-left: 20px" @click="add">添加用户</el-button>
            </el-form-item>
        </el-form>

        <!-- 用户表格展示 -->
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column property="id" label="编号" width="125" />
            <el-table-column property="name" label="姓名" width="160" />
            <el-table-column property="username" label="用户名" width="160" />
            <el-table-column property="password" label="密码" width="160" />
            <el-table-column property="age" label="年龄" width="125" />
            <el-table-column property="gender" label="性别" width="125" />
            <el-table-column property="address" label="地址" width="160" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="edit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination style="margin-top: 20px; float: right" background layout="prev, pager, next"
            :page-size="pageSize" :total="total" :current-page="currentPage" @current-change="page" />

        <!-- 添加用户弹窗 -->
        <el-dialog title="添加用户" v-model="dialogTableVisible" width="30%">
            <el-form :model="addUser" label-width="auto" style="max-width: 600px">
                <el-form-item label="姓名">
                    <el-input v-model="addUser.name" />
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="addUser.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="addUser.password" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="addUser.age" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="addUser.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="addUser.address" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addClick">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改用户弹窗 -->
        <el-dialog title="修改用户" v-model="dialogTableVisible2" width="30%">
            <el-form :model="updateUser" label-width="auto" style="max-width: 600px">
                <el-form-item label="ID">
                    <el-input v-model="updateUser.id" readonly />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="updateUser.name" />
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="updateUser.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="updateUser.password" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="updateUser.age" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="updateUser.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="updateUser.address" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateClick">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

// 数据变量
const keyWord = ref('')
const type = ref('name')
const pageSize = ref(2)
const total = ref(0)
const currentPage = ref(1)
const dialogTableVisible = ref(false)
const dialogTableVisible2 = ref(false)
const tableData = ref([])

const addUser = ref({
    name: '', username: '', password: '', age: '', gender: '', address: ''
})

const updateUser = ref({
    id: '', name: '', username: '', password: '', age: '', gender: '', address: ''
})

// 添加用户弹窗
const add = () => {
    dialogTableVisible.value = true
}

// 编辑用户
const edit = (row) => {
    dialogTableVisible2.value = true
    Object.assign(updateUser.value, row)
}

// 分页查询
const page = (pageNum) => {
    axios.get(`http://localhost:8181/user/list?page=${pageNum}&size=${pageSize.value}`).then((res) => {
        tableData.value = res.data.data
        total.value = res.data.total
        currentPage.value = pageNum
    })
}

// 条件搜索
const search = () => {
    currentPage.value = 1
    axios.get(`http://localhost:8181/user/list?page=1&size=${pageSize.value}&keyWord=${keyWord.value}&type=${type.value}`)
        .then((res) => {
            tableData.value = res.data.data
            total.value = res.data.total
        })
}

// 添加用户
const addClick = () => {
    axios.post('http://localhost:8181/user/add', addUser.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`用户【${addUser.value.name}】添加成功`, '', {
                confirmButtonText: '确定',
                callback: () => location.reload()
            })
        }
    })
}

// 修改用户
const updateClick = () => {
    axios.put('http://localhost:8181/user/update', updateUser.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`用户【${updateUser.value.name}】修改成功`, '', {
                confirmButtonText: '确定',
                callback: () => location.reload()
            })
        }
    })
}

// 删除用户
const del = (row) => {
    ElMessageBox.confirm(`确认删除用户【${row.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        axios.delete(`http://localhost:8181/user/delete/${row.id}`).then((res) => {
            if (res.data === 1) {
                ElMessageBox.alert(`用户【${row.name}】已删除`, '', {
                    confirmButtonText: '确定',
                    callback: () => location.reload()
                })
            }
        })
    })
}

// 初始化加载第一页
onMounted(() => {
    page(1)
})
</script>

<style scoped>
.demo-ruleForm {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.el-table {
    margin-top: 20px;
}
</style>
